<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
    <meta http-equiv="x-ua-compatible" content="ie=edge">
	<title>签到页面</title>
	<meta name="description" content="Neat">
	<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no" user-scalable="no">
	<link rel="stylesheet" href="css/style.css">
	<script src="../js/jquery.min.js"></script>
</head>
<body>
	<div class="main-group">
		<div class="main-top">
			<div class="integral-icon-group">
				<div class='title'>
					-已连续签到-
				</div>
				<div class="day">
					0<span>天</span>
				</div>
				<div class="button-group">
					<button class="integral-btn">点击签到</button>
				</div>
			</div>
			<div class="integral-note">
					明天签到得<span>+100</span>分
				</div>
		</div>
		<div class="main-bottom">
			<div class="integral-group">
				<div class="item today">
					<img src="imgs/integral.png">
					今日积分 10
				</div>
				<div class="space">|</div>
				<div class="item all">
					<img src="imgs/integral-all.png">
					全部积分 100
				</div>
			</div>

			<div class="task-group">
				<h3 class="title">做任务领积分</h3>
				<ul class="items">
					<li>
						<img src="imgs/icon-friends.png">
						<div class="data-group">
							<div class="data">
								<h4>
									邀请好友
								</h4>
								<p>
									积分+100 成长值+100
								</p>
							</div>
							<button>去邀请</button>
						</div>
					</li>
					<li>
						<img src="imgs/icon-cart.png">
						<div class="data-group">
							<div class="data">
								<h4>
									上传头像
								</h4>
								<p>
									积分+20 成长值+200
								</p>
							</div>
							<button>去上传</button>
						</div>
					</li>
					<li>
						<img src="imgs/icon-look.png">
						<div class="data-group">
							<div class="data">
								<h4>
									认证会员
								</h4>
								<p>
									积分+30 成长值+300
								</p>
							</div>
							<button>去认证</button>
						</div>
					</li>
					<li>
						<img src="imgs/icon-up.png">
						<div class="data-group">
							<div class="data">
								<h4>
									完善简历
								</h4>
								<p>
									积分+30 成长值+300
								</p>
							</div>
							<button>去完善</button>
						</div>
					</li>
				</ul>
			</div>
			<div class="h20"></div>
		</div>
	</div>
	<div class="alert-bg" style="display:none;">
		<div class="alert-group">
			<div class="alert-icon-group">
				<img src="imgs/signin.png">
				<p>签到成功</p>
			</div>
			<div class="alert-note-group">
				<p>恭喜获得</p>
				<p><span>100积分</span>积分可以兑换礼物</p>
				<p><button class="close-btn">我知道了</button></p>
			</div>
		</div>
	</div>
</body>
<script type="text/javascript">
	let alert_bg = $('.alert-bg');
	$('.integral-btn').click(function () {
		alert_bg.show();
	});
	$('.close-btn').click(function () {
		alert_bg.hide();
	});


</script>
</html>